<head>
  <meta name='layout' content='main' />
<g:javascript library="jquery" />
<g:javascript library="prototype" />
<title>Login</title>
</head>
<body>
  <div id='login'>
     <div class="ui-widget pad-me">
      <div class="ui-state-highlight ui-corner-all pad-me">
        <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: 0.3em;"></span><b>Bem-vindo</b></p>
         
         <br>
A Comissão de Contratualização de Serviços de Saúde saúda o Estabelecimento de Saúde representado por V.Sa., usuário administrador, pelo cumprimento de todos os requisitos referentes à Habilitação – Da Fase I: Documentação.
<br>
Para obter as informações pertinentes a Fase II: Avaliação e Classificação dos Candidatos informem o e-mail (usuário administrador) e senha para acessar os instrumentos de avaliação.

      </div>
    </div><!-- end .ui-widget -->
      <div class="spacer"></div>
      <div class="ui-mywidget pad-me">
          <p class="ui-myheader">Acessar os Instrumentos de Avalia&ccedil;&atilde;o</p>

            <form action='${postUrl}' method='POST' id='loginForm'>
              <g:if test='${flash.message}'>
                <div class='login_message' style="color:red;font-weight: bold;">
                  Aten&ccedil;&atilde;o: verfique se voc&ecirc; informou o usuario e senha informados no momento de inscri&ccedil;&atilde;o.
                </div>
              </g:if>
              <div class="left-me half-me">
                <label for='j_username'><b>E-mail: </b>
                <input type='text' class='text_' name='j_username' id='j_username' value='${request.remoteUser}' />
                </label>
              </div>
              <div class="right-me half-me">
                <label for='j_password'<b>Senha:</b>
                <input type='password' class='text_' name='j_password' id='j_password' />
                </label>
              </div>
              <div class="clear"></div>
              <div class="space-me"></div>
              <div>
                <input type='submit' value='Acessar' class="cmd green save" />
                <input type="button" onClick="divRecuperarSenha();" value="Esqueceu sua senha?"/>
              </div>
              <div class="clear"></div>
            </form>
         
            <div id="divRecuperarSenha"  style="background: #f0f0f0; padding: 20px; width: 300px;display:none;">
              Para recuperar sua senha, digite o seu e-mail cadastrado e clique no bot&atilde;o Ok.
              <br>
              <br>
              Você receber&aacute; sua senha no seu e-mail.
              <g:formRemote name="myForm" update="msg" onComplete="divRecuperarSenha();"  url="[action:'recuperarSenha']" >
                <input style="margin: 20px 0; width: 250px;" name="email" type="text"/>
                <input style="width: 50px;" type='submit' id="ok" value='Ok' onclick="mostra_ajax();" class="cmd green save" />
              </g:formRemote>
              <div id="imgAjax" style=" display: none;">
                <img src="../images/ajax-barra.gif" alt="carregando"   /><br>Carregando
              </div>
              <div id="msg"></div>
            </div>
  </div>
  </div>
  <script type='text/javascript'>
    function divRecuperarSenha(){ 
   document.getElementById("divRecuperarSenha" ).style.display = 'block';
   document.getElementById("ok" ).style.display = 'block';
   document.getElementById("imgAjax" ).style.display = 'none';
  }
     function mostra_ajax(indexador) {
  document.getElementById("imgAjax" ).style.display = 'block';
  document.getElementById("ok" ).style.display = 'none';
  }
  <!--
  (function(){
          document.forms['loginForm'].elements['j_username'].focus();
  })();

  // --> 
  </script>
</body>
</html>